<template>
	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="类型趋势" name="first">
				<div>
					<span>时间：</span>
					<el-date-picker v-model="value1" type="date" placeholder="选择日期">
					</el-date-picker>
				</div>
				<div class="chart-wrap">
					<div class="box">
						<p class="panel-title ml15 mb10">各类型分布</p>
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
					<div class="box">
						<p class="panel-title ml15 mb10">各类型年趋势</p>
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
					<div class="box">
						<p class="panel-title ml15 mb10">各类型影片属性分布</p>
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
					<div class="box">
						<p class="panel-title ml15 mb10">各类型影片制式分布</p>
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="电影备案" name="second">
				<div class="panel p20 mt15">
					<section>
						<div class="el-table">
							<h1>暂无数据</h1>
						</div>
					</section>
				</div>
			</el-tab-pane>
			<el-tab-pane label="制作中" name="third">
				<div class="chart-wrap">
					<div class="box">
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
					<div class="box">
						<div class="chart-container">
							<div class="tac">
								<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
								<p>暂无数据</p>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				value1: '',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				}
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				this.open();
			},
			open() {
				this.$confirm('该功能仅限于SVIP会员使用，你当前为免费会员。建议您选择升级会员，体验完整功能。', '功能使用受损', {
					confirmButtonText: '前往升级',
					cancelButtonText: '我知道了，暂不升级',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '请你付款!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消升级'
					});
				});
			},
		},
		mounted: function() {
			this.open();
		}
	}
</script>

<style>
	.chart-wrap {
		margin-top: 15px !important;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
	}

	.chart-wrap .box {
		background: #fff;
		padding-top: 15px;
		width: 50%;
	}

	.panel-title {
		margin: 0;
		border-left: 3px solid #7030a0;
		line-height: 18px;
		padding-left: 7px;
		font-size: 14px;
		color: #454555;
	}

	.mb10 {
		margin-bottom: 10px !important;
	}

	.ml15 {
		margin-left: 15px !important;
	}

	.mt15 {
		margin-top: 15px !important;
	}

	.p20 {
		padding: 20px !important;
	}

	.chart-wrap .box .chart-container {
		height: 390px;
		border: 1px solid #eee;
		margin: 20px;
		box-sizing: border-box;
	}

	.tac {
		padding-top: 100px;
		color: rgb(136, 136, 136);
		text-align: center !important;
	}

	.panel {
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
	}

	.el-table {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		flex: 1;
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #454555;
	}
</style>
